<template>
  <view>
    <view class="flex">
      <view class="times" @click="showTimePicker">
        <text v-if="start">{{ start }} ~ {{ end }}</text>
        <text v-else>{{ placeholder }}</text>
        <u-icon v-if="icon" :name="icon" color="#1A66FF" />
      </view>
      <u-icon
        v-if="index != 0"
        name="minus-circle"
        color="#f00"
        :custom-style="{ marginLeft: '20rpx' }"
        @click="deleteTime"
      />
    </view>
    <time-range
      :ref="'timeRef_' + field"
      :start-time="start"
      :end-time="end"
      @confirm="confirm"
    />
  </view>
</template>

<script>
import timeRange from "./timeRange";
export default {
  components: {
    timeRange,
  },
  props: {
    // 开始时间
    start: {
      type: String,
      default: "",
    },
    // 结束时间
    end: {
      type: String,
      default: "",
    },
    // 显示图标 clock
    icon: {
      type: String,
      default: "",
    },
    // 占位符
    placeholder: {
      type: String,
      default: "请选择时段",
    },
    // 集合字段标记
    field: {
      type: String,
      default: "",
    },
    // 下标
    index: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    // 打开时间选择器
    showTimePicker() {
      this.$refs["timeRef_" + this.field].open();
    },
    // 确认时间
    confirm(data) {
      this.$emit("confirm", {
        ...data,
        field: this.field,
        index: this.index,
      });
    },
    // 删除
    deleteTime() {
      this.$emit("delete", {
        field: this.field,
        index: this.index,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.times {
  border: 1rpx solid #e6e6e6;
  border-radius: 10rpx;
  height: 70rpx;
  line-height: 70rpx;
  width: 400rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text {
    color: #777777;
    font-size: 26rpx;
  }
}
</style>
